import React from 'react'

const Search = () => {

    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 设置状态
    const [list,setList] = React.useState([])
    const [keyword,setKeyWord] = React.useState('')

    let keyWord = React.useRef('')

    React.useEffect(() => {
        getCateData()
    },[])
    

    const getCateData = async () => {

        let data = {}

        if(keyWord)
        {
            data.keyword = keyWord.current
        }

        let result = await React.$Api.CateSearch(data)

        if(result.code === 1)
        {

            setList(result.data)
        }else{
            React.$Vant.Toast.info(result.msg)
            return false
        }

    }

    const onChange = async (val) => 
    {
        setKeyWord(val)

        keyWord.current = val

        setList([])

        getCateData()
    }

    const Items = () => {
        return list.map((item,index) => {
            return (

                <li key={index}>
                    <React.$Router.NavLink to={`/category/category/info?cateid=${item.id}`}>
                        <img src={item.image_text} alt="" />
                        <div className="right" style={{ marginTop: '10px' }}>
                                <p>{item.name}</p>
                            <span>{item.createtime_text}</span>
                        </div>
                    </React.$Router.NavLink>
                </li>
            )
        })
    }

    const onBack = () => {
        navigate(-1)
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title="搜素"
                    zIndex="10"
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <React.$Vant.Cell>
                <React.$Vant.Input
                    placeholder="请输入搜索的学术标题"
                    value={keyword}
                    onChange={onChange}
                />
            </React.$Vant.Cell>

            {/* 文章列表 */}

            <div className="chan_p_center">

                {/* 文章 */}
                <div className="list_color" style={{ marginTop: '10px' }}>
                    <ul>
                        <Items />
                    </ul>
                </div>
            </div>
        </>
    )
}

export default Search